Сброс стилей

[wildhind]

В другой теме поднялся вопрос, почему сброс стилей — это плохо. У некоторых он даже шаблоны порвал, а некоторые предположили, что это очередной модный тренд.

Здесь хочу пояснить, почему это плохо, и ответить на оставшиеся вопросы.

Всё очень просто: после завершения работ над сайтом в студии, управление сайтом передаётся заказчику. Сотрудники заказчика должны иметь возможность наполнения сайта контентом, при этом стандартные элементы разметки должны иметь ожидаемый вид.

Например, размещает сотрудник заказчика в тексте новости список, и этот список должен отобразиться списком, а не голым текстом со сброшенными стилями. Если этого не происходит, студия получает претензию от заказчика, техподдержка получает неоплачиваемую работу, которую могла бы не получить, если бы всё было изначально сделано правильно.

При этом, в зависимости от характера заказчика, возможно осложнение отношений. Прошу заметить, на ровном месте. Ничего не мешает вместо сброса стилей определить стили по умолчанию.

Если есть ещё вопросы по этой теме, прошу задавать.

[MiksIr]

Когда делается сайт для заказчика, который занимается наполнением сам - дизайнер рисует оформление всех стандартных элементов - заголовков, списков, таблиц и т.д. и даже более - разные виды этих оформлений, классы которых прописываются в визивиг. А верстальщик прописывает все это для тех контейнеров, которые редактирует пользователь. Каким местом тут сброшенные стили мешают?

[alexandr_v-vich]

Наверное следует уточнить про сброс каких именно стилей идёт речь.

Если про a img, о которых шла речь, то не думаю, что здесь что-то выйдет неожиданно для заказчика.

А если про списки - что именно за стили сбрасывают им?

[mishka]

Поначалу тоже был противником сброса. И тут на форуме в споры вступал да доказывал как же это плохо

Сейчас пользуюсь сбросом Мейера.

Считаю что лучше сделать сброс один раз, чем постоянно.

Сейчас у меня такое мнение сложилось:

Просто сброс -- плохо.

А вот сбросить(чтобы не делать это постоянно), но потом для основных элементов назначить стили -- это хорошо.

Уверен в том что никто не ожидает что вставит ссылку картинкою, а там еще и рамочка будет.

Ни одного вопроса в инете не найдешь типа "как мне сделать такую синюю рамочку вокруг картинки", зато вопросов как ее убрать полно.

Так что img { border: 0 } вполне нормальная запись.

[Great Rash]

Всё очень просто: после завершения работ над сайтом в студии, управление сайтом передаётся заказчику. Сотрудники заказчика должны иметь возможность наполнения сайта контентом, при этом стандартные элементы разметки должны иметь ожидаемый вид.

И что? Так нужно внутри сброса позаботиться о том, чтобы все элементы вообще имели ожидаемый вид. Если вам (или дизайнеру) лень позаботиться об этом, то сброс или его отсутствие тут не при чем.

[psywalker]

Есть ещё такая штука.

[wildhind]

Когда делается сайт для заказчика, который занимается наполнением сам - дизайнер рисует оформление всех стандартных элементов - заголовков, списков, таблиц и т.д. и даже более - разные виды этих оформлений, классы которых прописываются в визивиг. А верстальщик прописывает все это для тех контейнеров, которые редактирует пользователь. Каким местом тут сброшенные стили мешают?

Вот, правильный подход

А теперь посчитаем, сколько возможно контейнеров, которые редактирует пользователь, на что у него может хватить фантазии…

И что мы видим в итоге? Для каждого из элементов стили сброшены, а затем определены. Зачем?

[Softlink]

Сбрасывать нужно только то, что нужно. Что используется в проекте, ну или хотя бы гипотетически может использоваться.

Сброс Мейера в последней ревизии вполне лоялен(хотя сам им не пользуюсь). Однако, в нем есть одна маленькая оплошность. При:

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Не работает border-radius для ячеек таблицы. Во всех современных браузерах, кроме ИЕ9. Да и то, там как-то специфически отрисовываются бордеры, хотя заливка цветом происходит нормально.

Еще в качестве предположения, скажу, что ТС имела ввиду сброс через универсальный селектор? А-ля *{margin: 0; padding:0;}? Вот это точно злое зло.

[wildhind]

Есть ещё такая штука.

то же самое, только вид сбоку.

Лишнее выполнение ненужных действий.

Еще в качестве предположения, скажу, что ТС имела ввиду сброс через универсальный селектор? А-ля *{margin: 0; padding:0;}? Вот это точно злое зло.

чаще всего именно это и имеется в виду под сбросом стилей.

Да и даже решение Мейера не сильно от этого отличается в лучшую сторону.

[alexandr_v-vich]

Должен признаться не знал о том, что есть какие то определённые формы сброса стилей. Вот, тут про Мейера сказали. Нашёл, почитал......

это жеж бред! Зачем это использовать?? Что за??

Отменяем маркеры на все списки - прикол чтоли?? Это же особенность тега!

line-height: 1 - для body. Чего я не понимаю??

А этот огромный список тегов и....да вы шутите, ну так же нельзя!

Я думал речь идёт для бордер для картинки-ссылки или там, вон, определние тегов для html5 (хотя это не сброс, просто у Мейера было, вот и захватил). Ну я не знаю что ещё - но не ЭТО ЖЕ!!

Да и даже решение Мейера не сильно от этого отличается в лучшую сторону.

Ну да, да, конечно!

А всевышний селектор "*", думаю, вообще не трогать. По-моему, когда верстальщик узнаёт об этом селекторе и тем более о том, что с ним кто-то что-то сбрасывает, то у него уже к тому времени достаточно соображений, чтобы этим не заниматься....

Edited April 3, 2012 by alexandr_v-vich

[wildhind]

…

Я думал речь идёт для бордер для картинки-ссылки или там, вон, определние тегов для html5

…

Александр, вы испорчены здравым смыслом

[NeoXidizer]

либо я не с той планеты, либо вы

для меня сброс стилей - способ заставить используемые на странице элементы выглядеть одинаково во всех браузерах, не более

почему это плохо/почему этого нужно избегать/почему появилась эта тема на форуме - для меня загадка. Тысячи разработчиков (включая разработчиков CMS и сайтов-гигантов) используют сбросы и почему то не думают, что это "плохо".

P.S. сброс стилей никак не может быть "трендом". Первый ресет появился пример в 2004 году и представлял из себя *{margin:0;padding:0;}, в том виде, в котором он сейчас, он появился как минимум в 2007 году.

[SelenIT]

И всё-таки хотелось бы услышать объяснения, почему

вместо сброса стилей определить стили по умолчанию

судя по всему, хорошо, а

такая штука

которая, как справедливо отмечено,

то же самое, только вид сбоку

ВНЕЗАПНО

Лишнее выполнение ненужных действий.

[mishka]

Должен признаться не знал о том, что есть какие то определённые формы сброса стилей. Вот, тут про Мейера сказали. Нашёл, почитал......

это жеж бред! Зачем это использовать?? Что за??

Отменяем маркеры на все списки - прикол чтоли?? Это же особенность тега!

В таком случае оформляй меню чем угодно но не списком, чтобы не лишать тега его собственности.

line-height: 1 - для body. Чего я не понимаю??

Я тоже не понял что тебе непонятно.

А этот огромный список тегов и....да вы шутите, ну так же нельзя!

На то он и глобальный для всех тегов, или считаешь что "*" лучше?

Я думал речь идёт для бордер для картинки-ссылки или там, вон, определние тегов для html5 (хотя это не сброс, просто у Мейера было, вот и захватил). Ну я не знаю что ещё - но не ЭТО ЖЕ!!

Ты считаешь что вместо пары строк где некоторым тегам html5 задается display: block это хуже чем писать много раз этот display: block где встретится такой тег?

Да и даже решение Мейера не сильно от этого отличается в лучшую сторону.

Ну да, да, конечно!

Можно подробнее?

А всевышний селектор "*", думаю, вообще не трогать. По-моему, когда верстальщик узнаёт об этом селекторе и тем более о том, что с ним кто-то что-то сбрасывает, то у него уже к тому времени достаточно соображений, чтобы этим не заниматься....

Обычно про * {margin: 0;padding: 0} начинающие верстальщики узнают сразу же.

[NeoXidizer]

P.S.S. У разработчиков браузеров разные мнения насчет тегов:

h1...h6, p, body, a img, таблиц, списков, outline и :focus, :active свойств, особенно по разному выглядят элементы форм, а так же такие элементы, как sub и sup, quotes. Возможно, что-то забыл, назвал, что пришло в голову

их обычно и сбрасывают

Edited April 3, 2012 by NeoXidizer

[alexandr_v-vich]

Должен признаться не знал о том, что есть какие то определённые формы сброса стилей. Вот, тут про Мейера сказали. Нашёл, почитал......

это жеж бред! Зачем это использовать?? Что за??

Отменяем маркеры на все списки - прикол чтоли?? Это же особенность тега!

В таком случае оформляй меню чем угодно но не списком, чтобы не лишать тега его собственности.

Вот для меню как раз можно и убрать, как уникальный случай. А вообще никогда не оформляю меню списком. не считаю, что это правильно. Разве что кому-то удобнее...

line-height: 1 - для body. Чего я не понимаю??

Я тоже не понял что тебе непонятно.

Зачем это?

А этот огромный список тегов и....да вы шутите, ну так же нельзя!

На то он и глобальный для всех тегов, или считаешь что "*" лучше?

Он, ещё хуже. Дело в том, что и это уродство...не всё - может быть...ну, к примеру, - для заголовков font-size: 100% - что это?

Я думал речь идёт для бордер для картинки-ссылки или там, вон, определние тегов для html5 (хотя это не сброс, просто у Мейера было, вот и захватил). Ну я не знаю что ещё - но не ЭТО ЖЕ!!

Ты считаешь что вместо пары строк где некоторым тегам html5 задается display: block это хуже чем писать много раз этот display: block где встретится такой тег?

Ровно наоборот, это я как раз не против делать.

Да и даже решение Мейера не сильно от этого отличается в лучшую сторону.

Ну да, да, конечно!

Можно подробнее?

вопрос задавайте..

А всевышний селектор "*", думаю, вообще не трогать. По-моему, когда верстальщик узнаёт об этом селекторе и тем более о том, что с ним кто-то что-то сбрасывает, то у него уже к тому времени достаточно соображений, чтобы этим не заниматься....

Обычно про * {margin: 0;padding: 0} начинающие верстальщики узнают сразу же.

Нет

[Great Rash]

А вообще никогда не оформляю меню списком. не считаю, что это правильно. Разве что кому-то удобнее...

Вообще по семантике HTML5 положено именно списком

Зачем это?

Одинарный межстрочный интервал. В одних браузерах он по умолчанию полуторный, в других нет. Сброс же.

ну, к примеру, - для заголовков font-size: 100% - что это?

То же самое, что и font-size: 1em;

[mishka]

Можем на "ты"? Мне так проще.

Это сброс стилей. Тоесть весь текст будет одинаковым, просто слитным текстом. В самом названии заложено поведение.

Есть нормализация css. Тоесть там не сбрасывают, а потом определяют, а сразу переопределяют стили для элементов кроссбраузерно.

Выше Макс привел ссылку на такую нормализацию. Также например Blueprint тоже нормализирует стили, а не сбрасывает.

Както мне надоело постоянно спискам писать margin: 0; padding: 0; list-style: none;

Так как для поста можно раз написать что там список дефолтный(и то он поразному отображается с дефолтными стилями в разных браузерах, поэтомуму его ненадо оставлять дефолтным, а переопределять), а для всех остальных списков глобально скинуть стили.

То же и о заголовках и о параграфах, и о таблицах.

Поэтому лучше сбросить глобально, а потом переопределить. Не так много мест на сайте где требуются дефолтные стили элементов, поэтому юзая сброс получится меньше кода в итоге.

Не нравится сброс Мейера, да не вопрос, сделай свой. Обычно со временем верстальщики и приходят к своему сбросу.

[rus]

Я наверное окажусь в числе "меньшинства" но тоже против использования сброса, про нормализацию ничего не знаю, но бегло пробежавшись отметил для себя что ребята, которые разработали эту тему в правильном направлении, но только лишь по теме багов и фиксов некоторых тегов в некоторых браузерах.

А против сброса наверное по той же причине, по какой и wildhind, потому как не стоит забывать, когда вы сдаете отрисованный, сверстанный и оговоренный по всем пунктам макет, он уже не является вашим подопечным, так как переходит в руки а-ля контент манагеров, или того хуже - самого директора, который ни черта не смыслет ни в верстке, ни вообще в вэбе... и тупым копированием из ворда (со всеми его бяками) вставляет текст на страницу и т.д. и т.п.

[Great Rash]

и тупым копированием из ворда (со всеми его бяками) вставляет текст на страницу и т.д. и т.п.

От тупого копирования из ворда (особенно в висивиг) не спасет ничто, инфа 100%!

[alexandr_v-vich]

Можем на "ты"? Мне так проще.

Это сброс стилей. Тоесть весь текст будет одинаковым, просто слитным текстом. В самом названии заложено поведение.

Есть нормализация css. Тоесть там не сбрасывают, а потом определяют, а сразу переопределяют стили для элементов кроссбраузерно.

Выше Макс привел ссылку на такую нормализацию. Также например Blueprint тоже нормализирует стили, а не сбрасывает.

Както мне надоело постоянно спискам писать margin: 0; padding: 0; list-style: none;

Так как для поста можно раз написать что там список дефолтный(и то он поразному отображается с дефолтными стилями в разных браузерах, поэтому его ненадо оставлять дефолтным, а переопределять), а для всех остальных списков глобально скинуть стили.

То же и о заголовках и о параграфах, и о таблицах.

Поэтому лучше сбросить глобально, а потом переопределить. Не так много мест на сайте где требуются дефолтные стили элементов, поэтому юзая сброс получится меньше кода в итоге.

Не нравится сброс Мейера, да не вопрос, сделай свой. Обычно со временем верстальщики и приходят к своему сбросу.

Я сначала написал комментарий, а потом увидел твой. Потому, немного вырвано из контекста напишу его как цитату, а потом уже отвечу

В общем, как я это вижу

1. Сброс margin для абзацев - плохо. Абзацы можно оформить 2мя способами и именно тот margin, что стоит - используется зачастую в веб.

2. Сброс шрифта для заголовков - плохо. Если нужно ставить шрифт, можно и так его ставить...вообще не понял этого.

3. Softlink заметил

Не работает border-radius для ячеек таблицы.

4. Сброс маркеров - плохо. Это часть тега. Его особенность.

5. line-height так и не понял, но думаю, поможете разобраться

Это то, что на первый взгляд. Я ни разу этим не пользовался (сбросом по Мейеру), потому могу ещё много не заметить.

Общее впечатление - ужаса, поскольку на один плюс видно сходу пара минусов.

Теперь далее. Да, я тебя понял. У каждого ведь немного (да может и не так немного) свой стиль вёрстки. Соглашусь, что каждый со временем приходит к собственному сбросу.

Просто меня удивило то, что я увидел. Ведь первый раз осмысленно на то смотрел)))

Хотя можно ещё принять за идею то, что всё равно мы стремимся к общему стилю вёрстки. Чтобы один без труда понимал другого. Верстальщик кодера, заказчик верстальщика, верстальщик верстальщика. Потому, может собственный тип сброса не так хорошо. А по Мейеру - более менее общепринятый, потому и отношение такое вышло..

[NeoXidizer]

на этом форуме, кстати, тоже используется ресет

body,form,ol,ul,li,dd,dt,fieldset{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4{font-size:100%;font-weight:normal;margin:0}q:before,q:after{content:''}abbr,acronym{border:0}hr{display:none}address{display:inline}body{background:#fff;color:#1c2837;font:normal 13px arial,verdana,tahoma,sans-serif}img,.input_check,.input_radio{vertical-align:middle}legend{display:none}table{width:100%}td{padding:3px}h2{font-size:1.6em;font-weight:normal;margin:0 0 8px 0;clear:both}

[SelenIT]

А вообще никогда не оформляю меню списком. не считаю, что это правильно. Разве что кому-то удобнее...

Вообще по семантике HTML5 положено именно списком

Буду благодарен за точную цитату . Спецификация пестрит какими угодно примерами — там и навигация в абзацах, и ссылки в обычном тексте, плюс в разделе про nav прямо указано (перед последним примером), что "A nav element doesn't have to contain a list"...

[mishka]

Я наверное окажусь в числе "меньшинства" но тоже против использования сброса, про нормализацию ничего не знаю, но бегло пробежавшись отметил для себя что ребята, которые разработали эту тему в правильном направлении, но только лишь по теме багов и фиксов некоторых тегов в некоторых браузерах.

А против сброса наверное по той же причине, по какой и wildhind, потому как не стоит забывать, когда вы сдаете отрисованный, сверстанный и оговоренный по всем пунктам макет, он уже не является вашим подопечным, так как переходит в руки а-ля контент манагеров, или того хуже - самого директора, который ни черта не смыслет ни в верстке, ни вообще в вэбе... и тупым копированием из ворда (со всеми его бяками) вставляет текст на страницу и т.д. и т.п.

Так тут и говорят о том что надо не просто сбросить, но потом еще и определить стили для тех блоков и их элементов где будет вводится контент вручную клиентом.

[sigma77]

А вообще никогда не оформляю меню списком. не считаю, что это правильно. Разве что кому-то удобнее...

Вообще по семантике HTML5 положено именно списком

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose

п.с. И да, я тоже против глобальных сбросов/переопределений стилей. Сбрасывать и переопределять нужно только так, где это используется. Тем более не нужно сбрасывать глобально элементы, которые имеют весьма определенное назначение - списки, заголовки, начертания шрифтов.

Хотя для навигации, в свете html5 - nav ul {margin: 0; padding: 0; list-style: none;}, в принципе можно и использовать. Но никак не просто к ul.

Хотя очевидность использования списков для навигации, после появления nav, для меня всё менее и менее очевидна ))

Edited April 3, 2012 by sigma77